<template>
  <div class="wantToCooperate">
    <myHead title="我要合作"></myHead>
    <div class="shangjia">
        <div class="sj_tit">商家入驻</div>
        <div class="sj_item" v-for="x in iconList.slice(0,1)" @click="jump(x.page)">
          <img :src="x.url" alt="" class="sj_img">
          <div class="sj_info">
            <p><span>{{x.tit}}</span><span>{{x.msg}}</span></p>
            <img src="../../../static/img/youjiantou-111.png" alt="">
          </div>
        </div>
    </div>
    <div class="shangjia">
        <div class="sj_tit">骑手入驻</div>
        <div class="sj_item" v-for="x in iconList.slice(1,)" @click="jump(x.page)">
          <img :src="x.url" alt="" class="sj_img">
          <div class="sj_info">
            <p><span>{{x.tit}}</span><span>{{x.msg}}</span></p>
            <img src="../../../static/img/youjiantou-111.png" alt="">
          </div>
        </div>
    </div>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  export default {
    name: "wantToCooperate",
    components:{
      myHead
    },
    data(){
      return {
        iconList: [{url:'../../../static/img/meishi_icon@2x.png',tit:'商家入驻',msg:'线上开店带客流，做营销',page:"MerchantCertification"},{url:'../../../static/img/paotui@2x.png',tit:'跑腿专员入驻',msg:'线上开店带客流，做营销',page: 'RiderCertification'}]
      }
    },
    methods:{
      jump(page){
        this.$router.push({
          name:page
        })
      }
    }
  }
</script>

<style scoped>
  .wantToCooperate {
    width: 100%;
    min-height: 6.67rem;
    padding-top: .5rem;
  }
  .shangjia {
    padding: 0 .15rem;
  }
  .sj_tit {
    height: .6rem;
    line-height: .6rem;
    font-size:.16rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #333333;
  }
  .sj_item {
    height: .38rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .25rem;
  }
  .sj_img {
    width: .38rem;
    height:.38rem;
  }
  .sj_info {
    width: calc(100% - .5rem);
    height: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .sj_info>img {
    width: .06rem;
    height: .12rem;
  }
  .sj_info>p {
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .sj_info>p>span:nth-child(1) {
    font-size:.15rem;
    font-family:PingFang SC;
    font-weight:bold;
    color: #666666;
  }
  .sj_info>p>span:nth-child(2) {
    font-size:.13rem;
    font-family:PingFang SC;
    color: #999999;
  }
</style>
